<template>
	<a-card :bordered="false">
		<a-form ref="searchFormRef" name="advanced_search" :model="searchFormState" class="ant-advanced-search-form">
			<a-row :gutter="24" style="margin-bottom: 10px">
				<a-col :span="6">
					<a-form-item label="标题" name="title">
						<a-input v-model:value="searchFormState.title" placeholder="请输入标题" allowClear />
					</a-form-item>
				</a-col>
				<a-col :span="6">
					<a-form-item label="所属栏目" name="columnId">
						<a-select
							v-model:value="searchFormState.columnId"
							placeholder="请输入所属栏目"
							allowClear
							:options="columnOptions"
							:field-names="{ label: 'columnName', value: 'id' }"
						/>
					</a-form-item>
				</a-col>
				<a-col :span="6">
					<a-form-item label="审批状态" name="status">
						<a-select
							v-model:value="searchFormState.status"
							placeholder="请选择审批状态"
							allowClear
							:options="statusOptions"
						/>
					</a-form-item>
				</a-col>
				<a-col :span="6">
					<a-form-item label="创建时间" name="createTime">
						<a-range-picker
							v-model:value="searchFormState.createTime"
							value-format="YYYY-MM-DD HH:mm:ss"
							allowClear
							show-time
						/>
					</a-form-item>
				</a-col>
				<a-col :span="6">
					<a-button type="primary" @click="tableRef.refresh()">查询</a-button>
					<a-button style="margin: 0 8px" @click="reset">重置</a-button>
				</a-col>
			</a-row>
		</a-form>

		<s-table
			ref="tableRef"
			:columns="columns"
			:data="loadData"
			:alert="options.alert.show"
			bordered
			:row-key="(record) => record.id"
			:tool-config="toolConfig"
			:row-selection="options.rowSelection"
		>
			<!-- eslint-disable-next-line vue/no-useless-template-attributes -->
			<template #operator class="table-operator">
				<a-space>
					<a-button type="primary" @click="formRef.onOpen(null, columnOptions)" v-if="hasPerm('bizNewContentAdd')">
						<template #icon><plus-outlined /></template>
						新增
					</a-button>
					<xn-batch-delete
						v-if="hasPerm('bizNewContentBatchDelete')"
						:selectedRowKeys="selectedRowKeys"
						@batchDelete="deleteBatchBizNewContent"
					/>
				</a-space>
			</template>
			<template #bodyCell="{ column, record }">
				<template v-if="column.dataIndex === 'type'">
					{{ $TOOL.dictTypeData('CONTENT_TYPE', record.type.toString()) }}
				</template>
				<template v-if="column.dataIndex === 'isRate'">
					{{ $TOOL.dictTypeData('IS_RATE', record.isRate.toString()) }}
				</template>
				<template v-if="column.dataIndex === 'status'">
					{{ $TOOL.dictTypeData('APPLY_STATUS', record.status.toString()) }}
				</template>
				<template v-if="column.dataIndex === 'action'">
					<a-space v-if="record.status < 1">
						<a @click="formRef.onOpen(record, columnOptions)" v-if="hasPerm('bizNewContentEdit')">编辑</a>
						<a-divider type="vertical" v-if="hasPerm(['bizNewContentEdit', 'bizNewContentDelete'], 'and')" />
						<a-popconfirm title="确定要删除吗？" @confirm="deleteBizNewContent(record)">
							<a-button type="link" danger size="small" v-if="hasPerm('bizNewContentDelete')">删除</a-button>
						</a-popconfirm>
						<a-popconfirm title="确定提交审核？" @confirm="applyBizNewContent(record)">
							<a-button type="link" danger size="small" v-if="hasPerm('bizNewContentDelete')">提交审核</a-button>
						</a-popconfirm>
					</a-space>
					<a-space v-else>
						<a-button type="link" primary size="small" @click="viewRef.onOpen(record, columnOptions)">查看</a-button>
					</a-space>
				</template>
			</template>
		</s-table>
	</a-card>
	<Form ref="formRef" @successful="tableRef.refresh()" />
	<View ref="viewRef"></View>
</template>

<script setup name="newcontent">
import tool from '@/utils/tool'
import { cloneDeep } from 'lodash-es'
import Form from './form.vue'
import View from './view.vue'
import bizNewContentApi from '@/api/biz/bizNewContentApi'
import bizNewColumnApi from '@/api/biz/bizNewColumnApi'
const searchFormState = ref({})
const searchFormRef = ref()
const tableRef = ref()
const formRef = ref()
const viewRef = ref()
const toolConfig = { refresh: true, height: true, columnSetting: true, striped: false }
const columnOptions = ref([])
import { onMounted } from 'vue'
const columns = [
	{
		title: '标题',
		dataIndex: 'title'
	},
	{
		title: '所属栏目',
		dataIndex: 'columnName'
	},
	{
		title: '类型',
		dataIndex: 'type'
	},
	{
		title: '描述',
		dataIndex: 'description',
		ellipsis: true
	},
	{
		title: '审批状态',
		dataIndex: 'status'
	},
	{
		title: '审批意见',
		dataIndex: 'remark',
		ellipsis: true
	},
	// {
	// 	title: '内容',
	// 	dataIndex: 'content',
	// 	ellipsis: true
	// },
	// {
	// 	title: '是否评分',
	// 	dataIndex: 'isRate'
	// },
	{
		title: '创建时间',
		dataIndex: 'createTime'
	}
]
// 操作栏通过权限判断是否显示
if (hasPerm(['bizNewContentEdit', 'bizNewContentDelete'])) {
	columns.push({
		title: '操作',
		dataIndex: 'action',
		align: 'center',
		width: 220
	})
}
const selectedRowKeys = ref([])
const statusOptions = tool.dictList('APPLY_STATUS')

// 列表选择配置
const options = {
	// columns数字类型字段加入 needTotal: true 可以勾选自动算账
	alert: {
		show: true,
		clear: () => {
			selectedRowKeys.value = ref([])
		}
	},
	rowSelection: {
		onChange: (selectedRowKey, selectedRows) => {
			selectedRowKeys.value = selectedRowKey
		}
	}
}
const loadData = (parameter) => {
	const searchFormParam = cloneDeep(searchFormState.value)
	// createTime范围查询条件重载
	if (searchFormParam.createTime) {
		searchFormParam.startCreateTime = searchFormParam.createTime[0]
		searchFormParam.endCreateTime = searchFormParam.createTime[1]
		delete searchFormParam.createTime
	}
	return bizNewContentApi.bizNewContentPage(Object.assign(parameter, searchFormParam)).then((data) => {
		return data
	})
}
// 重置
const reset = () => {
	searchFormRef.value.resetFields()
	tableRef.value.refresh(true)
}
// 删除
const deleteBizNewContent = (record) => {
	let params = [
		{
			id: record.id
		}
	]
	bizNewContentApi.bizNewContentDelete(params).then(() => {
		tableRef.value.refresh(true)
	})
}
// 批量删除
const deleteBatchBizNewContent = (params) => {
	bizNewContentApi.bizNewContentDelete(params).then(() => {
		tableRef.value.clearRefreshSelected()
	})
}
// 提交审核
const applyBizNewContent = (params) => {
	let data = Object.assign({}, params)
	data.status = 1
	bizNewContentApi.applyBizNewContent(data).then(() => {
		tableRef.value.clearRefreshSelected()
	})
}

onMounted(() => {
	bizNewColumnApi.bizNewColumnData({}).then((data) => {
		columnOptions.value = data
	})
})
</script>
